
<!DOCTYPE html>
<html>

<head>
    <title>甲壳虫云手机</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 设置苹果工具栏颜-->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <!-- <meta name="screen-orientation" content="portrait"> -->
    <!-- QQ强制竖屏 -->
    <!-- <meta name="x5-orientation" content="portrait"> -->
    <!-- 不能旋转，问题出在这 -->
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone  -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- Load the polyfill to switch-hit between Chrome and Firefox -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background-color: grey;
        }

        .phoneBox {
            background-color: grey;
            height: calc(100vh - 60px); /* 假设父元素也有相应的高度 */
            width: 100%; /* 假设父元素也有相应的宽度 */
            position: relative;
        }

        .content{
            width:100%;height:100%;
            padding-top:20px;
            box-sizing: border-box;
        }
        .btns{
            display: flex;
            justify-content: center;
            width:100%;
        }
        .phoneMemu{
            display: flex;
            justify-content: center;
        }
        .phoneMemu .btn-item{
            width:80px;height:40px;
            color:#fff;
            margin:0 10px;
            border-radius:20px;
        }
        .btns .btn-item{
            width:80px;height:40px;
            background-color: rgba(255, 255, 255, 0.3);
            color:#fff;
            margin:0 10px;
            border-radius:20px;
        }
        input{
            background: none;
            border:none;
            color:#fff;
            line-height: 40px;
            display: block;
            width:100%;
            height:100%;
            text-align: center;
        }
        /* 整个遮罩容器 */
        .overlay-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        /* 点击隐藏的空白区域 */
        .overlay-blank {
            flex-grow: 1;
            width: 100%;
        }

        /* 底部弹出的遮罩层 */
        .overlay {
            width: 100%;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.5);
        }
    </style>
    <!-- 云手机对接sdk,请联系项目经理获取最新版本 -->
    <script type="text/javascript" src="/static/yunphone/BgsSdk.min.1.37.0.js"></script>
    <script type="text/javascript" src="/static/yunphone/axios.min.js"></script>

    <script>
        var uuid,token;

        function startPhone() {
            // 获取当前页面的查询参数
            var queryParams = getQueryParameters();

            // 检查是否包含uuid和token
            if (queryParams.hasOwnProperty('uuid') && queryParams.hasOwnProperty('token')) {
                // 获取uuid和token的值
                uuid = queryParams.uuid;
                token = queryParams.token;
                console.log('UUID:', uuid);
                console.log('Token:', token);
            } else {
                var div = document.getElementById("warn");
                div.style.display = "flex";
                console.log('URL中不包含uuid或token参数');
                return;
            }

            // 初始化参数
            var params = {
                viewId: 'phoneBox', // 必填
                uuid: uuid, // 必填
                autoResize:true,
                width:1080,
                height:1920,
                callbacks: {
                    // 初始化失败回调
                    onInitFail: function(code,msg) {
                        console.log('on init code:' + code + ' msg:' + msg);
                    },
                    onInitSuccess: function() {
                        console.log('on init success:');
                    },
                    // 链接成功回调
                    onConnectSuccess: function () {
                        //隐藏菜单
                        BgsSdk.setNavBarState(2)
                        //使用麦克风
                        redfinger.setMicroRight(true); // 可使用麦克风
                        //使用摄像头
                        redfinger.config.isCameraLive = true;
                        //码率帧率
                        setMalv('biao')
                    },
                    // 链接失败回调
                    onConnectFail: function (code, msg) {
                        console.log('on fail code:' + code);
                        stopPhone();
                    },
                    // 结束回调
                    onStoped: async function() {
                        // 已断开云手机
                        console.log('on stoped');
                    },
                    onRunInformation:function(type, info){
                        displayInfo(info);
                    }
                }
            }

            // 开始初始化
            let initRet = BgsSdk.initPhone(params);
            if (initRet) {
                BgsSdk.startPhone(token);
            }

        }

        function gaoq(){
            BgsSdk.changeResolution(1080,1920);
        }
        // 结束试玩
        function stopPhone() {
            BgsSdk.stopPhone();
        }

        function goMenu() {
            BgsSdk.sendCommand(redfinger.KEY_TYPE.KEY_MENU)
        }

        function goHome() {
            BgsSdk.sendCommand(redfinger.KEY_TYPE.KEY_HOMEPAGE)
        }

        function goBack() {
            BgsSdk.sendCommand(redfinger.KEY_TYPE.KEY_BACK)
        }

        function setHeng(){
            BgsSdk.setScreenOrientation(1)
        }

        function setShu(){
            BgsSdk.setScreenOrientation(0)
        }

        function setMalv(type){
            switch (type) {
                case 'biao':
                    BgsSdk.changeResolution(720,1280)
                    BgsSdk.setStreamConfig(0,0,4096,0)
                    break;
                case 'gao':
                    BgsSdk.changeResolution(1080,1920)
                    BgsSdk.setStreamConfig(0,0,8092,0)
                    break;
                default:
                    break;
            }
        }

        function setZhen(zhen){
            BgsSdk.setStreamConfig(0,0,0,zhen)
        }

        function tiaoshi(){
            var div = document.getElementById('TS');
            if (div.style.display === 'none') {
                div.style.display = 'block';
            } else {
                div.style.display = 'none';
            }
        }

        function getQueryParameters(url) {
            // 如果未提供url，则使用当前页面的URL
            url = url || window.location.href;

            // 获取URL中'?'符及其后面的字符串，即查询字符串
            var queryString = url.split('?')[1];

            // 如果没有查询字符串，直接返回一个空对象
            if (!queryString) {
                return {};
            }

            // 将查询字符串分割成键值对数组
            var params = queryString.split('&').reduce(function (acc, item) {
                // 分割每个键值对，并添加到累加器中
                var parts = item.split('=');
                acc[parts[0]] = decodeURIComponent(parts[1]);
                return acc;
            }, {});

            return params;
        }

        function displayInfo(info) {
            // 假设页面上有对应的div元素
            const netDelayDiv = document.getElementById('TSnetDelay');
            const decodeTimeDiv = document.getElementById('TSdecodeTime');
            const widthDiv = document.getElementById('TSwidth');
            const heightDiv = document.getElementById('TSheight');
            const perSecondFPSDiv = document.getElementById('TSperSecondFPS');
            const bitrateDiv = document.getElementById('TSbitrate');
            const fpsDiv = document.getElementById('TSfps');
            const perDroppedFrameCountDiv = document.getElementById('TSperDroppedFrameCount');
            const runTimeCountDiv = document.getElementById('TSrunTimeCount');

            // 更新div的内容
            netDelayDiv.textContent = `网络延迟: ${info.netDelay}ms`;
            decodeTimeDiv.textContent = `解码时间: ${info.decodeTime || '未知'}`;
            widthDiv.textContent = `分辨率宽度: ${info.width}px`;
            heightDiv.textContent = `分辨率高度: ${info.height}px`;
            perSecondFPSDiv.textContent = `实时帧率: ${info.perSecondFPS}fps`;
            bitrateDiv.textContent = `码率: ${info.bitrate}kbps`;
            fpsDiv.textContent = `设备最高帧率: ${info.fps}fps`;
            perDroppedFrameCountDiv.textContent = `丢帧率: ${info.perDroppedFrameCount}`;
            runTimeCountDiv.textContent = `运行时长: ${info.runTimeCount}秒`;
        }

        function refreshScreen(){
            startPhone()
        }

    </script>
</head>

<body onload="startPhone();">
<div style="position: fixed;width:100%;height:300px;left:0;top:0;background-color: rgba(0, 0, 0, 0.8);color:#fff;display: none;z-index: 99999999;" id="TS">
    <div id="TSnetDelay"></div>
    <div id="TSdecodeTime"></div>
    <div id="TSwidth"></div>
    <div id="TSheight"></div>
    <div id="TSperSecondFPS"></div>
    <div id="TSbitrate"></div>
    <div id="TSfps"></div>
    <div id="TSperDroppedFrameCount"></div>
    <div id="TSrunTimeCount"></div>
</div>
<div style="height: 100vh">
    <div class="phoneBox" id="phoneBox"></div>
    {if $app_plate neq 'h5'}
    <div style="height: 60px;color: #2d2d2d;background:#f6f6f6;display: flex;line-height: 57px;">
        <div style="width: 50%;height:60px"></div>
        <div style="width: 50%;height:60px;text-align: center;font-size: 14px;"  onclick="goHome()">云机桌面</div>

    </div>
    {/if}
</div>


<div id="menu" style="width:50px;height:50px;background-color:rgba(0, 0, 0, 0.5);position: fixed;right:0px;bottom:350px;border-radius:10px;z-index: 99999999;">
    <div style="width:40px;height:40px;background-color:rgba(0, 0, 0, 0.8);border-radius:20px;margin:0 auto;margin-top:5px;"></div>
</div>

<div id="overlayContainer" class="overlay-container" style="display: none;">
    <div id="overlayBlank" class="overlay-blank"></div>
    <div id="overlay" class="overlay">
        <div class="content">
            <div class="btns">
                <div class="btn-item"><input type="button" value="停止" onclick="stopPhone()"></div>
                <div class="btn-item"><input type="button" value="横屏" onclick="setHeng()"></div>
                <div class="btn-item"><input type="button" value="竖屏" onclick="setShu()"></div>
                <div class="btn-item"><input type="button" value="调试" onclick="tiaoshi()"></div>
                <div class="btn-item"><input type="button" value="刷新" onclick="refreshScreen()"></div>
            </div>
            <div style="width:100%;height:20px;"></div>
            <div class="btns">
                <div class="btn-item"><input type="button" value="标清" onclick="setMalv('biao')"></div>
                <div class="btn-item"><input type="button" value="高清" onclick="setMalv('gao')"></div>
                <!-- <div class="btn-item"><input type="button" value="1080p" onclick="gaoq()"></div> -->
                <div class="btn-item"><input type="button" value="30帧" onclick="setZhen(30)"></div>
                <div class="btn-item"><input type="button" value="60帧" onclick="setZhen(60)"></div>
            </div>
            <div style="width:100%;height:20px;"></div>
            <div class="phoneMemu">
                <div class="btn-item"><input type="button" value="进程" onclick="goMenu()"></div>
                <div class="btn-item"><input type="button" value="手机桌面" onclick="goHome()"></div>
                <div class="btn-item"><input type="button" value="返回" onclick="goBack()"></div>
            </div>
        </div>
    </div>
</div>

<div style="display: flex;justify-content: center;align-items: center;flex-direction: column;display:none;position: fixed;left:0;top:0;width:100%;height:100%;background-color:#fff;z-index: 9999999;" id="warn">
    <div style="color:red;font-weight: bold;text-align: center;">您没有访问权限!</div>
</div>


<script type="text/javascript">
    //悬浮按钮控制
    const menu = document.getElementById('menu');
    let offsetX, offsetY;

    menu.addEventListener('touchstart', (e) => {
        const touch = e.touches[0];
        offsetX = touch.clientX - menu.offsetLeft;
        offsetY = touch.clientY - menu.offsetTop;
        menu.style.transition = 'none'; // 关闭过渡
    });

    menu.addEventListener('touchmove', (e) => {
        const touch = e.touches[0];
        menu.style.left = touch.clientX - offsetX + 'px';
        menu.style.top = touch.clientY - offsetY + 'px';
    });

    menu.addEventListener('touchend', () => {
        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;

        const menuRect = menu.getBoundingClientRect();
        const leftDistance = menuRect.left; // 距离左边的距离
        const rightDistance = screenWidth - menuRect.right; // 距离右边的距离
        const topDistance = menuRect.top; // 距离顶部的距离
        const bottomDistance = screenHeight - menuRect.bottom; // 距离底部的距离

        // 吸附到最近的边框
        const minDistance = Math.min(leftDistance, rightDistance, topDistance, bottomDistance);

        if (minDistance === leftDistance) {
            menu.style.left = '0px'; // 吸附到左边
        } else if (minDistance === rightDistance) {
            menu.style.left = `${screenWidth - menuRect.width}px`; // 吸附到右边
        } else if (minDistance === topDistance) {
            menu.style.top = '0px'; // 吸附到顶部
        } else if (minDistance === bottomDistance) {
            menu.style.top = `${screenHeight - menuRect.height}px`; // 吸附到底部
        }

        menu.style.transition = 'left 0.3s, top 0.3s'; // 重新开启过渡
    });

    // 为 menu 添加点击事件
    menu.addEventListener('click', () => {
        if(document.getElementById('overlayContainer').style.display == 'flex'){
            document.getElementById('overlayContainer').style.display = 'none';
        }else{
            document.getElementById('overlayContainer').style.display = 'flex';
        }
    });

    // 点击上方的空白区域隐藏遮罩
    document.getElementById('overlayBlank').addEventListener('click', function () {
        document.getElementById('overlayContainer').style.display = 'none';
    });

</script>

</body>
</html>
